<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>用户列表</title>
  <link rel="stylesheet" href="../../css/sysmgmt(用户管理-用户列表）.css" />
  <link rel="stylesheet" href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.min.css" />
  <script src="../../lib/JQuery/jquery-1.11.3.js"></script>
  <script src="../../lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="../../src/font/font-index/iconfont.css">
  <script src="../../src/font/font-index/iconfont.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-12">
        <div id="searchDiv">
          <form class="form-inline" action="#">
            <div class="form-group">
              <input type="text" id="searchName" class="form-control" placeholder="请输入人员名称" />
            </div>
            <div class="form-group">
              <select id="searchSex" class="form-control">
                <option value="0">用户性别</option>
                <option value="1">男</option>
                <option value="2">女</option>
              </select>
            </div>
            <button class="btn btn-default" id="searchBtn">
              <span class="glyphicon glyphicon-search"></span> 查询
            </button>
            <button class="btn btn-default" id="reset">
              <span class="glyphicon glyphicon-repeat"></span> 清空
            </button>
          </form>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-12">
        <div id="optionDiv">
          <button class="btn btn-default" id="export">
            <span class="glyphicon glyphicon-open"></span> 导出
          </button>
          <button class="btn btn-default" id="forbidden">
            <span class="glyphicon glyphicon-open"></span> 禁用
          </button>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-12">
        <table id="tableHead" class="table table-hover">
          <thead>
            <tr>
              <td>
                <input type="checkbox" id="inlineCheckbox1" value="option1" />
                ID
              </td>
              <td align="center">人员名称</td>
              <td align="center">人员头像</td>
              <td align="center">人员性别</td>
              <td align="center">联系方式</td>
              <td align="center">用户地址</td>
              <td align="center">注册时间</td>
              <td align="center">启用状态</td>
              <td>操作</td>
            </tr>
          </thead>
          <tbody id="tableDiv">
            <!-- 这里渲染数据 -->
          </tbody>
        </table>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-12">
        <div id="pageBox">
          <span>共<span id="totPage"></span></span>
          <select id="selectShowPageNum" class="form-control">
            <option value="0">10条/页</option>
            <option value="1">20条/页</option>
            <option value="2">50条/页</option>
          </select>
          <span id="prePage" class="glyphicon glyphicon-chevron-left"></span>
          <div id="pageDiv">
            <!-- 这里渲染页码 -->
            <span class="page active">1</span>
            <span class="page">1</span>
          </div>
          <span id="nextPage" class="glyphicon glyphicon-chevron-right"></span>
          <span id="skip">
            前往
            <input type="text" id="goPageNum" class="form-control" /><span>
              页
            </span></span>
          <span id="goPage">跳转</span>
        </div>
      </div>
    </div>
  </div>

  <!-- 查看个人信息 -->
  <div class="modal fade" id="infoDiv" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <form>
            <div class="form-group" id="h1">
              <h4>| 用户基本信息</h4>
            </div>
            <div class="form-group box">
              <div id="xingming">用户姓名：</div>
              <div id="shouji">用户手机号：</div>
            </div>
            <div class="form-group box">
              <div id="xingbie">用户性别：</div>
              <div id="youxiang">邮箱：</div>
            </div>
            <div class="form-group box">
              <div id="dizhi">用户地址：</div>
            </div>
            <div class="form-group" id="h2">
              <h4>| 健康档案</h4>
            </div>
            <div id="mydiv">
              <span>真实姓名</span>
              <span>人员性别</span>
              <span>出生日期</span>
              <span>关系</span>
              <span>既往史</span>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
            关闭
          </button>
        </div>
      </div>
    </div>
  </div>

  <script>
    // 模拟数据
    let arr = [
      { id: 1, name: '张三', sex: '男', phone: '18868803516', site: '北京市房山区旭辉天地999号', time: '2022-10-10 12:00:00', state: 1, email: '' },
      { id: 2, name: '李四', sex: '女', phone: '', site: '', time: '2022-10-10 12:00:00', state: 1, email: '' },
      { id: 3, name: '王五', sex: '女', phone: '18868803516', site: '浙江省乐清市柳市镇小小村999号', time: '2022-10-10 12:00:00', state: 2, email: '' },
      { id: 4, name: '二娃', sex: '男', phone: '', site: '北京市房山区旭辉天地999号', time: '2022-10-10 12:00:00', state: 1, email: '' },
      { id: 5, name: '三娃', sex: '女', phone: '18868803516', site: '北京市房山区旭辉天地999号', time: '2022-10-10 12:00:00', state: 2, email: '' },
      { id: 6, name: '四娃', sex: '男', phone: '', site: '', time: '2022-10-10 12:00:00', state: 1, email: '' },
      { id: 7, name: '五娃', sex: '男', phone: '', site: '', time: '2022-10-10 12:00:00', state: 1, email: '' },
      { id: 8, name: '六娃', sex: '男', phone: '', site: '浙江省乐清市柳市镇小小村999号', time: '2022-10-10 12:00:00', state: 2, email: '' },
      { id: 9, name: '大娃', sex: '女', phone: '', site: '', time: '2022-10-10 12:00:00', state: 1, email: '' },
      { id: 10, name: '七娃', sex: '男', phone: '18868803516', site: '', time: '2022-10-10 12:00:00', state: 1, email: '' },
      { id: 11, name: '张三', sex: '男', phone: '18868803516', site: '北京市房山区旭辉天地999号', time: '2022-10-10 12:00:00', state: 1, email: '' },
      { id: 12, name: '李四', sex: '女', phone: '', site: '', time: '2022-10-10 12:00:00', state: 1, email: '' },
      { id: 13, name: '王五', sex: '女', phone: '18868803516', site: '浙江省乐清市柳市镇小小村999号', time: '2022-10-10 12:00:00', state: 1, email: '' },
      { id: 14, name: '二娃', sex: '男', phone: '', site: '北京市房山区旭辉天地999号', time: '2022-10-10 12:00:00', state: 1, email: '' },
      { id: 15, name: '三娃', sex: '女', phone: '18868803516', site: '北京市房山区旭辉天地999号', time: '2022-10-10 12:00:00', state: 1, email: '' },
      { id: 16, name: '四娃', sex: '男', phone: '', site: '', time: '2022-10-10 12:00:00', state: 1, email: '' },
      { id: 17, name: '五娃', sex: '男', phone: '', site: '', time: '2022-10-10 12:00:00', state: 1, email: '' },
      { id: 18, name: '六娃', sex: '男', phone: '', site: '浙江省乐清市柳市镇小小村999号', time: '2022-10-10 12:00:00', state: 1, email: '' },
      { id: 19, name: '大娃', sex: '女', phone: '', site: '', time: '2022-10-10 12:00:00', state: 1 },
      { id: 20, name: '七娃', sex: '男', phone: '18868803516', site: '', time: '2022-10-10 12:00:00', state: 1 },
      { id: 21, name: '张三', sex: '男', phone: '18868803516', site: '北京市房山区旭辉天地999号', time: '2022-10-10 12:00:00', state: 1 },
      { id: 22, name: '李四', sex: '女', phone: '', site: '', time: '2022-10-10 12:00:00', state: 1 },
      { id: 23, name: '王五', sex: '女', phone: '18868803516', site: '浙江省乐清市柳市镇小小村999号', time: '2022-10-10 12:00:00', state: 1 },
      { id: 24, name: '二娃', sex: '男', phone: '', site: '北京市房山区旭辉天地999号', time: '2022-10-10 12:00:00', state: 1 },
      { id: 25, name: '三娃', sex: '女', phone: '18868803516', site: '北京市房山区旭辉天地999号', time: '2022-10-10 12:00:00', state: 1 },
      { id: 26, name: '四娃', sex: '男', phone: '', site: '', time: '2022-10-10 12:00:00', state: 1 },
      { id: 27, name: '五娃', sex: '男', phone: '', site: '', time: '2022-10-10 12:00:00', state: 1 },
      { id: 28, name: '六娃', sex: '男', phone: '', site: '浙江省乐清市柳市镇小小村999号', time: '2022-10-10 12:00:00', state: 1 },
      { id: 29, name: '大娃', sex: '女', phone: '', site: '', time: '2022-10-10 12:00:00', state: 1 },
      { id: 30, name: '七娃', sex: '男', phone: '18868803516', site: '', time: '2022-10-10 12:00:00', state: 1 },
      { id: 31, name: '张三', sex: '男', phone: '18868803516', site: '北京市房山区旭辉天地999号', time: '2022-10-10 12:00:00', state: 1 },
      { id: 32, name: '李四', sex: '女', phone: '', site: '', time: '2022-10-10 12:00:00', state: 1 },
      { id: 33, name: '王五', sex: '女', phone: '18868803516', site: '浙江省乐清市柳市镇小小村999号', time: '2022-10-10 12:00:00', state: 1 },
      { id: 34, name: '二娃', sex: '男', phone: '', site: '北京市房山区旭辉天地999号', time: '2022-10-10 12:00:00', state: 1 },
      { id: 35, name: '三娃', sex: '女', phone: '18868803516', site: '北京市房山区旭辉天地999号', time: '2022-10-10 12:00:00', state: 1 },
      { id: 36, name: '四娃', sex: '男', phone: '', site: '', time: '2022-10-10 12:00:00', state: 1 },
      { id: 37, name: '五娃', sex: '男', phone: '', site: '', time: '2022-10-10 12:00:00', state: 1 },
      { id: 38, name: '六娃', sex: '男', phone: '', site: '浙江省乐清市柳市镇小小村999号', time: '2022-10-10 12:00:00', state: 1 },
      { id: 39, name: '大娃', sex: '女', phone: '', site: '', time: '2022-10-10 12:00:00', state: 1 },
      { id: 40, name: '七娃', sex: '男', phone: '18868803516', site: '', time: '2022-10-10 12:00:00', state: 1 },
      { id: 41, name: '张三', sex: '男', phone: '18868803516', site: '北京市房山区旭辉天地999号', time: '2022-10-10 12:00:00', state: 1 },
      { id: 42, name: '李四', sex: '女', phone: '', site: '', time: '2022-10-10 12:00:00', state: 1 },
      { id: 43, name: '王五', sex: '女', phone: '18868803516', site: '浙江省乐清市柳市镇小小村999号', time: '2022-10-10 12:00:00', state: 1 },
      { id: 44, name: '二娃', sex: '男', phone: '', site: '北京市房山区旭辉天地999号', time: '2022-10-10 12:00:00', state: 1 },
      { id: 45, name: '三娃', sex: '女', phone: '18868803516', site: '北京市房山区旭辉天地999号', time: '2022-10-10 12:00:00', state: 1 },
      { id: 46, name: '四娃', sex: '男', phone: '', site: '', time: '2022-10-10 12:00:00', state: 1 },
      { id: 47, name: '五娃', sex: '男', phone: '', site: '', time: '2022-10-10 12:00:00', state: 1 },
    ]

    let searchArr = []
    let dangqianyeData = []
    let maxPage
    let dangqianyePage = 1
    let delId
    let xgId
    search()

    // 筛选
    $('#searchBtn').click(function () {
      search()
    })

    function search() {
      let searchName = $('#searchName').val()
      let searchSex = $('#searchSex option:selected').text()
      console.log(searchName, searchSex)
      searchArr = [...arr]
      if (searchName != '') {
        for (let i = 0; i < searchArr.length; i++) {
          if (searchName != searchArr[i].name) {
            searchArr.splice(i, 1)
            i--
          }
        }
      }
      if (searchSex != '用户性别') {
        for (let i = 0; i < searchArr.length; i++) {
          if (searchArr[i].sex != searchSex) {
            searchArr.splice(i, 1)
            i--
          }
        }
      }
      // console.log(searchArr)
      showPage(searchArr)
      showData(searchArr, 1)
    }

    // 重置
    $('#reset').click(function () {
      $('#searchName').val("")
      $('#searchSex option:first-child').prop('selected', 'selected')
      search()
    })

    // 根据数据渲染table的dom节点
    function show(data) {
      $('#tableDiv').html('')
      for (let i = 0; i < data.length; i++) {
        $('#tableDiv').append(`
          <tr>
            <td>
              <input type="checkbox" id="inlineCheckbox1" value="option1" />
              ${data[i].id}
            </td>
            <td align="center">${data[i].name}</td>
            <td align="center"><img src="../../src/img/黑框照片.png" /></td>
            <td align="center">${data[i].sex}</td>
            <td align="center">${data[i].phone}</td>
            <td align="center">${data[i].site}</td>
            <td align="center">${data[i].time}</td>
            <td align="center">
              ${data[i].state == 1
              ? `<input dataStu = "${data[i].id}" class="switch-btn switch-btn-animbg" type="checkbox" checked>`
              : `<input dataStu = "${data[i].id}" class="switch-btn switch-btn-animbg" type="checkbox">`}
            </td>
            <td>
              <span data-toggle="modal" data-target="#infoDiv" 
                data-whatever="@mdo" id = 'xiangqingbtn' onclick = 'xiangqing(${JSON.stringify(data[i])})'>
                查看个人信息
              </span>
            </td > 
          </tr>
        `)
      }
    }

    // 切割数据
    function showData(data, pageNum) {
      let qishi = (pageNum - 1) * 10
      dangqianyeData = data.slice(qishi, qishi + 10)
      show(dangqianyeData)
      $('.page').eq(pageNum - 1).addClass('active').siblings().removeClass('active')
      dangqianyePage = pageNum
    }

    // 渲染页码
    function showPage(data) {
      maxPage = Math.ceil(data.length / 10)
      $('#pageDiv').html('')
      for (let i = 1; i <= maxPage; i++) {
        $('#pageDiv').append(`<button class="page">${i}</button>`)
      }
      // 共多少条数据
      $('#totPage').html('')
      $('#totPage').append(`<span>${searchArr.length}条</span>`)
    }

    $('#pageDiv').on('click', '.page', function () {
      showData(searchArr, parseInt($(this).text()))
    })

    // 根据输入的页码重新渲染数据
    $('#goPage').click(function () {
      refreshto()
    })

    function refreshto() {
      let goPageNum = $('#goPageNum').val()
      if (goPageNum != 0 && goPageNum <= maxPage) {
        showData(searchArr, goPageNum)
      }
    }

    // // 上一页  下一页
    $('#prePage').click(function () {
      if (dangqianyePage > 1) {
        let shangyiye = dangqianyePage - 1
        showData(searchArr, shangyiye)
      }
    })

    $('#nextPage').click(function () {
      if (dangqianyePage < maxPage) {
        let xiayiye = dangqianyePage + 1
        showData(searchArr, xiayiye)
      }
    })

    // // 删除
    function getDelId(id) {
      delId = id;
    }

    $("#del").click(function () {
      for (let i = 0; i < searchArr.length; i++) {
        if (searchArr[i].id == delId.id) {
          arr.splice(i, 1);
        }
      }
      searchArr = [...arr]
      $("#delDiv").modal("hide");
      showPage(searchArr);
      showData(searchArr, dangqianyePage);
    });

    // 查看个人信息渲染
    function xiangqing(data) {
      $('#xingming').append('' + data.name + '');
      $('#shouji').append('' + data.phone + '');
      $('#xingbie').append('' + data.sex + '');
      $('#youxiang').append('' + data.email + '');
      $('#dizhi').append('' + data.site + '');
    }
  </script>
</body>

</html>